<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { ElPopover, ElButton, ElTooltip } from 'element-plus'
  import { IconType, SIcon, SMask } from '@xtail/vue3'
  import { StrUtil } from '@xtail/core'
  import ScanEye from '@iconify-icons/tabler/scan-eye'
  import { XIconPicker } from '../XIconPicker'
  import { IconSelectorPropsType } from './types'

  defineOptions({
    name: 'XIconSelector'
  })

  const props = withDefaults(defineProps<IconSelectorPropsType>(), {
    popoverProps: {} as any,
    triggerBtnProps: {} as any,
    triggerBtnIconClass: '',
    triggerBtnIconStyle: '',
    previewTriggerTooltipProps: {} as any,
    previewTriggerIconProps: {} as any,
    previewTriggerIconClass: '',
    previewTriggerIconStyle: '',
    maskProps: {} as any,
    previewIconScale: 8,
    previewIconClass: '',
    previewIconStyle: ''
  })

  const value = defineModel<IconType>({ default: null })

  const isShowPreview = ref(false)
  const handlePreview = () => {
    if (!value.value) return
    isShowPreview.value = true
  }

  const previewIconStyleComputed = computed(() => {
    if (StrUtil.isStr(props.previewIconStyle)) {
      return `
      ${props.previewIconStyle};
      transform: scale(${props.previewIconScale});
    `
    }
    return {
      ...props.previewIconStyle,
      transform: `scale(${props.previewIconScale})`
    }
  })
</script>

<template>
  <div class="x-icon-selector">
    <el-popover
      v-bind="{
        placement: 'bottom-start',
        disabled: !iconSets || iconSets.length === 0,
        ...popoverProps,
        popperStyle: {
          width: '80%',
          maxWidth: '450px',
          ...(popoverProps.popperStyle ?? ({} as any))
        }
      }"
    >
      <template #reference>
        <slot name="trigger" :icon="value">
          <el-button v-bind="triggerBtnProps">
            <template #icon>
              <div
                class="x-icon-selector__trigger-btn-icon"
                :class="triggerBtnIconClass"
                :style="triggerBtnIconStyle"
              >
                <s-icon :icon-type="value?.iconType" :icon-props="value?.iconProps" />
              </div>
            </template>
          </el-button>
        </slot>
      </template>
      <template #default>
        <slot name="picker">
          <x-icon-picker
            v-model="value"
            :icon-sets="iconSets"
            :online-search="onlineSearch"
            :online-search-tab-pane-props="onlineSearchTabPaneProps"
            :online-search-icon-set-props="onlineSearchIconSetProps"
            :icon-set-props="iconSetProps"
            :icon-set-iconify-props="iconSetIconifyProps"
            :tab-pane-props="tabPaneProps"
            :tab-pane-class="tabPaneClass"
            :tab-pane-style="tabPaneStyle"
            :tabs-props="tabsProps"
            :tabs-class="tabsClass"
            :tabs-style="tabsStyle"
          />
        </slot>
      </template>
    </el-popover>
    <div v-if="value" class="x-icon-selector__preview-trigger">
      <slot name="preview-trigger" :is-show-preview="isShowPreview" :handle-preview="handlePreview">
        <el-tooltip v-bind="{ content: '预览图标', ...previewTriggerTooltipProps }">
          <div
            class="x-icon-selector__preview-trigger-icon"
            :class="previewTriggerIconClass"
            :style="previewTriggerIconStyle"
          >
            <s-icon
              v-bind="{
                iconProps: { icon: ScanEye },
                ...previewTriggerIconProps
              }"
              @click="handlePreview"
            />
          </div>
        </el-tooltip>
      </slot>
    </div>
    <s-mask v-model="isShowPreview" v-bind="maskProps">
      <slot name="preview-icon" :icon="value">
        <div
          class="x-icon-selector__preview-icon"
          :class="previewIconClass"
          :style="previewIconStyleComputed"
        >
          <s-icon :icon-type="value?.iconType" :icon-props="value?.iconProps" />
        </div>
      </slot>
    </s-mask>
  </div>
</template>

<style lang="scss">
  @use './style' as *;
</style>
